/*
 * reset css
 */
@charset "utf-8";
html, body, div, p, ul, li, dl, dd, dt, h1, h2, h3, h4, h5, h6, ol, input, textarea, section, article, hgroup {
  padding: 0;
  margin: 0;
}
html, body {
  width: 100%;
  height: 100%; 
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
ul, li, ol {
  list-style: none;
}
img {
  -webkit-touch-callout: none;
  display: block;
  border: 0;
}
a {
  text-decoration: none;
}
input, textarea, button, button {
  outline: none;
}
input:disabled {
    background: transparent;
    color: #666;
}
button:disabled {
  opacity: 0.5;
  color: #666;
}
input::-webkit-input-placeholder {
  color: #999;
}
input:-moz-placeholder {
  color: #999;
}
.f-l {float: left;}
.f-r {float: right;}
.pos-r {position: relative;}
.pos-a {position: absolute;}
.pos-f {position: fixed;}
.text-center {text-align: center;}
.block-center {
  margin-left: auto;
  margin-right: auto;
}
.clearfix:after { 
  clear: both; 
  content: ''; 
  height: 0; 
  visibility: hidden; 
  display: block; 
  font-style: 0 
}

.vertical-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

// 进出场动画
.slide-in-appear {
  opacity: 1;
  transform: translate3D(0, 0, 0);
  transition: all .3s linear;

  &.slide-in-leave-active {
    opacity: 0.01;
    transform: translate3D(-100%, 0, 0);
  }
}

.slide-in-enter {
   opacity: 1;
  transform: translate3D(0, 0, 0);
  transition: all .3s linear;

  &.slide-in-leave-active {
    opacity: 0.01;
    transform: translate3D(-100%, 0, 0);
  }
}

// 向左滑出
.slide-in-leave {
  opacity: 1;
  transform: translate3D(0, 0, 0);
  transition: all .3s linear;

  &.slide-in-leave-active {
    opacity: 0.01;
    transform: translate3D(-100%, 0, 0);
  }
}